<template>
	<div class="box">
		<Header />
		<div class="main">
			<div class="content">
				<div class="title">
					<h2>个人设定</h2>
				</div>
				<div class="top">
					<el-avatar :size="50" />
					<el-upload>
						<el-button size="large" :icon="Upload" round type="warning" plain
							>上传头像</el-button
						>
					</el-upload>
					<a href=""><el-button :icon="Edit" text>查看个人页</el-button></a>
				</div>
				<div class="form-box">
					<div class="form-inner">
						<div class="form-item">
							<div class="label">
								<h3>昵称</h3>
								<el-button :icon="Edit" text>编辑</el-button>
							</div>
							<p>角角者266500</p>
						</div>
						<div class="form-item">
							<div class="label">
								<h3>简介</h3>
								<el-button :icon="Edit" text>编辑</el-button>
							</div>
							<p>还没有自我介绍？请点编辑新增个人简介</p>
						</div>
						<div class="form-item">
							<div class="label">
								<h3>账号管理</h3>
								<el-icon><ArrowRight /></el-icon>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import Header from "../components/Header.vue";
import { Upload, Edit, ArrowRight } from "@element-plus/icons-vue";

import { ref } from "vue";
const activeName = ref("second");
</script>

<style lang="scss" scoped>
.box {
	background: #ffffff;
}
.content {
	margin: 0px auto;
	width: 100%;
	max-width: 32rem;
	padding-bottom: 4rem;
	padding-left: 1rem;
	padding-right: 1rem;
	.title {
		display: flex;
		align-items: center;
		height: 4rem;
		justify-content: center;
		h2 {
			font-size: 1.25rem;
			font-weight: 400;
			line-height: 1.5;
			letter-spacing: 0.05em;
			color: #2d3748;
		}
	}
	.top {
		margin: 0px 0px 2rem;
		min-width: 0px;
		display: grid;
		gap: 1rem;
		position: relative;
		justify-content: center;
		justify-items: center;
		:deep(.el-avatar) {
			position: relative;
			border-radius: 50%;
			overflow: hidden;
			width: 8rem;
			height: 8rem;
			border-style: solid;
			border-width: 0.125rem;
			border-color: #a0aec0;
			background-color: #a0aec0;
		}
		a {
			height: 3rem;
			position: absolute;
			top: 0rem;
			right: 0rem;
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 3rem;
			letter-spacing: 0.05em;
		}
	}
	.form-box {
		.form-inner {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}
	}
	.form-item {
		.label {
			display: flex;
			height: 4rem;
			align-items: center;
			justify-content: space-between;
		}
		h3 {
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			letter-spacing: 0.05em;
			color: #2d3748;
		}
		p {
			font-size: 0.875rem;
			font-weight: 400;
			line-height: 2;
			letter-spacing: 0.05em;
			color: #718096;
		}
	}
}
</style>